<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.导入echarts -->
    <script src="./echarts/echarts.min.js"> </script>
</head>

<body>
    <!-- 2.写盒子 -->
    <!-- 3.给echarts准备一个定义宽高的盒子 -->
    <div id="main" style="height: 300px;width: 600px;"></div>
    <script>
        // 4.创建图表

        // 4.1基于准备好的dom 初始化eharts实例
        const myChart = echarts.init(document.querySelector('#main'))

        const m2R2Data= [
              {value:335, legendname:'2万以上',name:"六千以上  335",itemStyle:{color:"#00d99e"}},
              {value:310, legendname:'1.5-2万',name:"八千以  310",itemStyle:{color:"#00befc"}},
              {value:234, legendname:'1-1.5万',name:"一万以  234",itemStyle:{color:"#1097ff"}},
              {value:154, legendname:'1万以下',name:"一万二以上  154",itemStyle:{color:"#ff9900"}},

            ];
        // 4.2图标样式 指定图表的配置和数据
        const  option = {
    title: [
    {
        text: '班级薪资分布',
        textStyle: {
            fontSize: 16,
            color: "black"
        },
        left: "2%"
    },   
    // 需要一个标题 title就是对象 多个标题是对象数组
    // {
    //     text: '合计',
    //     subtext: 12312+'个',
    //     textStyle:{
    //         fontSize:20,
    //         color:"black"
    //     },
    //     subtextStyle: {
    //         fontSize: 20,
    //         color: 'black'
    //     },
    //     textAlign:"center",
    //     x: '34.5%',
    //     y: '44%',
    // }
    ],
    tooltip: {
        trigger: 'item',
        formatter:function (parms){
          var str=  parms.seriesName+"</br>"+
            parms.marker+""+parms.data.legendname+"</br>"+
            "数量："+ parms.data.value+"</br>"+
            "占比："+ parms.percent+"%";
            return  str ;
        }
    },
    legend: {
        // 详情数量多的时候可以溢出隐藏 滚动
        type:"scroll",
        // 排列方向
        orient: 'horizontal',
        left:'center',
        align:'left',
        top:'bottom',
        textStyle: {
            color:'#8C8C8C'
        },
        height:250
    },
    series: [
        {
            name:'薪资',
            type:'pie',
            // 饼图圆心的位置
            center: ['50%', '50%'],
            // 内外圆的直径
            radius: ['50%', '40%'],
             clockwise: false, //饼图的扇区是否是顺时针排布
            //  数据过多时避免文字被遮挡
            avoidLabelOverlap: true,
            label: {
                normal: {
                    show: true,
                    position: 'outter',
                     formatter:function (parms){
                         return parms.data.legendname
                     }
                }
            },
            // 饼图样式 
            itemStyle:{
                // 圆角
                borderRadius: 15,
                // 圆角缺失部分颜色
                borderColor: '#fff',
                borderWidth: 2
            },
            labelLine: {
                normal: {
                    // 文字指示线的长度
                  length:50,
                //   第二根线的长度
                  length2:10,
                //   指示线的圆角
                  smooth:true,
                },
               
            },
            data:m2R2Data
        }
    ]
};

        // 4.3 使用指定的配置项和数据显示图表
        myChart.setOption(option)
    </script>
</body>

</html>